<template>
  <div>
    <h3>分类数据接口地址：http://老师IP:3000/api/cate.json</h3>

    <el-button @click="show = true">添加</el-button>

    <div v-if="goodsName != ''">
      <div>
        所属分类：{{catName}}
      </div>
      <div>
        商品名称：{{goodsName}}
      </div>
      <div>
        <el-tag closable @close="delTag(k)" :key="k" v-for="(v,k) in checkedNodes">{{v.title}}</el-tag>
      </div>
    </div>

    <el-dialog @close="onClose" :title="'第' + step + '步'" :visible.sync="show">

      <template v-if="step==1">
        <el-cascader
          v-model="cate_id"
          :options="comCateData"
          :props="{
            value: 'title',
            children: 'child',
            label: 'title'
          }"
        ></el-cascader>
      </template>
      <template v-if="step==2">
        <el-form label-width="80px">
          <el-form-item label="所属分类">
            {{cate_id[0]}} > {{cate_id[1]}}
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="tmpGoodsName"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template v-if="step==3">
        <el-tree
          ref="tree"
          :data="cateData"
          show-checkbox
          :props="{
            value: 'title',
            children: 'child',
            label: 'title'
          }"
        ></el-tree>
      </template>

      <template slot="footer">
        <el-button v-if="step==3" @click="ok">确定</el-button>
        <el-button v-if="step==1 && cate_id.length > 0" @click="step=2">下一步</el-button>
        <el-button v-if="step==2" @click="step=3">下一步</el-button>
        <el-button @click="show=false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import cate from '../../data/cate.json'
export default {
  data() {
    return {
      step: 1,
      cateData: cate.data,
      show: false,
      cate_id: [],
      goodsName: '',
      catName: '',
      tmpGoodsName: '',
      checkedNodes: []
    }
  },
  methods: {
    ok() {
      this.catName = this.cate_id.join('>')
      this.goodsName = this.tmpGoodsName
      this.checkedNodes = this.$refs.tree.getCheckedNodes()
      this.show = false
    },
    onClose() {
      this.step = 1
      this.cate_id = []
    },
    delTag(k) {
      this.checkedNodes.splice(k, 1)
    }
  },
  computed: {
    comCateData() {
      return this.cateData.filter(v => {
        return v.child
      })
    }
  }
}
</script>
